<template>
  <div id="header">
    <div class="top">
      <div class="pic">
        <img src="./assets/images/people.png" alt="" />
      </div>
      <div class="text-pic">快速登录U净账号</div>
    </div>
    <div class="middle">
      <input type="text" placeholder="请输入账号" v-model="v1" />
      <input type="password" placeholder="请输入密码" v-model="v2" />
    </div>
    <div class="bottom">
      <button @click="myClick">登录</button>
    </div>
  </div>
</template>


<script>
export default {
  name: "mylogin",
  data(){
    return {
      v1:'',
      v2:''
    }
  },
  methods:{
    myClick(){
      if (this.v1.length == 0){
      return;
    }
    if (this.v1 == "admin" && this.v2 == "123123"){
      this.$router.replace({path:'/myPage',query:{name:"admin"}});
    }else {
      alert("登录失败")
    }
    }
  }
};
</script>


<style lang="scss" scoped>
#header {
  .top {
    .pic {
      img {
        width: 50px;
        height: 50px;
        margin-left: 124px;
      }
    }
    .text-pic {
      text-align: center;
      color: #0bc466;
    }
  }
  .middle {
    input {
      width: 200px;
      height: 40px;
      margin-left: 53px;
      margin-top: 40px;
      border-radius: 30px;
      background-color: #0bc466;
      border: 1px solid #0bc466;
      padding-left: 10px;
      color: white;
      outline: none;
    }
  }
  .bottom {
    button {
      margin-top: 40px;
      width: 100px;
      height: 40px;
      margin-left: 111px;
      border-radius: 30px;
      background-color: #0bc466;
      border: 1px solid #0bc466;
      color: white;
    }
  }
}
</style>